<template>
  <div>
    <el-button-group class="group">
      <el-button id="lastest" @click="clickLastest" :type="activeLatest?'primary':'infor'" icon="el-icon-star-on">最新</el-button>
      <el-button id="hotest" @click="clickHotest" :type="activeLatest?'infor':'primary'">
        最热
        <i class="el-icon-rank"></i>
      </el-button>
    </el-button-group>

    <el-tabs type="border-card" @tab-click="handleClick">
      <el-tab-pane v-for="(tab,index) in tabs" :key="index" :label="tab">
        <el-row style="margin-bottom:50px;" :gutter="50">
          <el-col v-for="(item,index) in items" :key="index" :span="8">
            <item style="margin:10px;height:350px;" :data="item" />
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>

    <el-pagination style="float:right;margin-top:20px;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="6" layout="total, prev, pager, next" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { getCategoryByType, getLatest, getHotest } from '../api/elasticApi';
import Item from '../components/item/item';
import Driver from 'driver.js';
import { mapActions, mapGetters } from 'vuex';
export default {
  name: 'browser',
  created() {
    this.$nextTick(() => {
      this.getAll();
      this.driverInit();
    });
  },
  data() {
    return {
      tabs: ['所有', '家常菜', '海鲜', '热菜', '汤粥'],
      activeLatest: true,
      defaultLabel: '所有',
      items: [],
      currentPage: 1,
      total: 100
    };
  },
  computed: {
    sort() {
      return this.activeLatest ? 'date' : 'fans';
    },
    ...mapGetters(['hasBrowserJoined'])
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      if (this.defaultLabel === '所有') {
        this.getAll(val);
      } else {
        this.getData(val);
      }
    },
    driverInit() {
      if (this.hasBrowserJoined) {
        return;
      }
      const driver = new Driver({
        doneBtnText: '完成',
        closeBtnText: '关闭',
        nextBtnText: '下一项',
        prevBtnText: '上一项',
        onHighlighted: el => {
          if (el.popover.options.isLast) {
            this.setHasBrowserJoined();
          }
        }
      });
      driver.defineSteps([
        {
          element: '#lastest',
          popover: {
            title: '最新',
            description: '点击选择最新',
            position: 'bottom'
          }
        },
        {
          element: '#hotest',
          popover: {
            title: '最热',
            description: '点击选择最热',
            position: 'bottom'
          }
        }
      ]);
      driver.start();
    },
    clickLastest() {
      if (this.activeLatest) {
        return;
      }
      this.activeLatest = true;
      this.handleClick({ label: this.defaultLabel });
    },
    clickHotest() {
      if (!this.activeLatest) {
        return;
      }
      this.activeLatest = false;
      this.handleClick({ label: this.defaultLabel });
    },
    normallize(hits) {
      this.items = [];
      /** @type {array} tmp */
      const tmp = hits.map(hit => {
        const id = hit['_id'];
        return {
          ...hit['_source'],
          id
        };
      });
      // console.log(tmp);
      // for (let i = 0; i < tmp.length / 3; i++) {
      //   this.items.push(tmp.slice(i, i + 3));
      // }
      this.items = tmp;
    },
    handleClick(tab) {
      // console.log(tab.label);
      this.defaultLabel = tab.label;
      if (tab.label === '所有') {
        this.getAll();
      } else {
        this.getData();
      }
    },
    getAll(from = 0) {
      if (this.activeLatest) {
        getLatest(from)
          .then(res => {
            this.total = res.data.hits.total;
            this.normallize(res.data.hits.hits);
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        getHotest(from)
          .then(res => {
            this.total = res.data.hits.total;
            this.normallize(res.data.hits.hits);
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    getData(from) {
      getCategoryByType(this.defaultLabel, this.sort, from)
        .then(res => {
          // console.log(res.data.hits.hits);
          this.total = res.data.hits.total;
          this.normallize(res.data.hits.hits);
        })
        .catch(err => {
          console.log(err);
        });
    },
    ...mapActions(['setHasBrowserJoined'])
  },
  components: {
    Item
  }
};
</script>

<style lang="scss" scoped>
.group {
  margin-bottom: 10px;
}
</style>
